import Base from "../base.js";
import cinemasApi from "../../api/cinemas.js";

export default class extends Base {
    render() {
        this.$el.html(`
        <h1 style="text-align:center">查询影院</h1>
        <form class="layui-form"  lay-filter="formTest" style="display:flex">
            <label class="layui-form-label" style="width:250px">影院名</label>              
            <input type="text"  name="name" lay-verify="title" autocomplete="off" placeholder="请输入影院名" class="layui-input">
            <label class="layui-form-label" style="width:250px">地址</label>
            <input type="text"  name="address" lay-verify="title" autocomplete="off" placeholder="请输入影院地址" class="layui-input">
            <label class="layui-form-label" style="width:250px">营业状态</label>
            <input type="text" name="status"  lay-verify="title" autocomplete="off" placeholder="请输入“是”或“否”，无输入默认为“是”。" class="layui-input">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
        </form>
        <div class="cinemas-list"></div>
        `);
        this.saveBtn = $(".layui-btn");
        this.form = layui.form;
        this.list = $(".cinemas-list");
    }
    async searchDate() {
        //获取表单区域所有值
        const data = this.form.val("formTest");
        data.status = (data.status == "是"||data.status =="") ? "true" : "false";
        const { name, address, status } = data
        const result = await cinemasApi.searchcinemas(name, address, status)
        // console.log(result);
        this.rerender(result);
    }
    handle() {
        this.saveBtn.on("click", () => this.searchDate())
    }
    rerender(result) {
        this.list.html(`
        <h1>影院列表</h1>
        <table class="layui-hide" id="list" lay-filter="list"></table>
        <div id="test1"></div>
        `
        );
        this.table = layui.table;
        this.table.render({
            elem: '#list'
            , cols: [[
                {
                    field: 'name', width: 250, title: '影院名', templet: (res) => {
                        return res.name
                    }
                }
                , {
                    field: 'phone', width: 150, title: '联系方式', templet: (res) => {
                        return res.phone
                    }
                }
                , {
                    field: 'address', title: '联系地址', templet: (res) => {
                        return res.address
                    }
                }
                , {
                    field: 'status', width: 100, title: '是否营业', templet: (res) => {
                        return `${res.status ? "是" : "否"}`
                    }
                }
            ]]
        });
        this.table.reload("list", {
            data: result
        });
    }
}